<template>
  <div>
    <el-breadcrumb separator="|" class="guideline">
        <el-breadcrumb-item>new</el-breadcrumb-item>
        <el-breadcrumb-item>past</el-breadcrumb-item>
        <el-breadcrumb-item>comments</el-breadcrumb-item>
        <el-breadcrumb-item>ask</el-breadcrumb-item>
        <el-breadcrumb-item>show</el-breadcrumb-item>
        <el-breadcrumb-item>jobs</el-breadcrumb-item>
        <el-breadcrumb-item>submit</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style scoped>
.guideline{
  background-color: orangered;
  height:30px;
  font-size:20px;
  line-height: 30px;
  vertical-align: center;
  color:#000;
  margin-bottom: 10px;
}
</style>
